(function($){    
    var _dialogBodyTmp = [
            '<div class="hvBox commonBg" style="width: 100%;height: 100%;overflow: auto;">',
                '<div class="mediaWrapper">',
                    '<img src="<%=o.image%>"/>',
                '</div>',
            '</div>'
        ].join(''),
        
        _defaultConfig = {
            minScale : 0.2,
            maxScale : 5,
            scaleStep : 0.2    
        };

    /**
     * 图片预览对话框.
     * @class ImagePreviewDialog
     */    
    var _ImagePreviewDialog = function (config) {      
        var _this = this;                
        $.extend(this.config, _defaultConfig, config);     
                 
        this.setProps({
            title : 'Image Preview',
            size : {
                width : 900,
                height : 500
            },
            isFullscreen : true,       
            buttons : [
                {   
                    props : 'actual|Actual Size',    
                    handler : function($btnObj){
                        //实际大小                          
                        _this.scale(1);
                    }
                }, {   
                    props : 'zoomIn|Zoom In',    
                    handler : function($btnObj){
                        //放大
                        _this.scale(Math.min(_this.imgScale + _this.config['scaleStep'], _this.config['maxScale']));
                    }
                }, {
                    props : 'zoomOut|Zoom Out',    
                    handler : function($btnObj){
                        //缩小
                        _this.scale(Math.max(_this.imgScale - _this.config['scaleStep'], _this.config['minScale']));  
                    }
                }, {
                    props : 'download|Download',
                    handler : function(){                        
                        ujs.browser.file.downloadFromLink(_this.config['image'], 'image.png');
                    }
                }
            ]
        });      
                
        _this.addDialogContent(tmpl(_dialogBodyTmp, {
            image : _this.config['image']
        }), function($dialogContent){
            _this.$image = $dialogContent.find('img');
            ujs.browser.img.getSize(_this.$image.attr('src')).done(function(width, height){                
                _this.trueImgWidth = width;
                _this.trueImgHeight = height;
                
                var fixSize = new Size(width, height);                
                var bodySize = _this.getDialogBodyInnerSize();
                fixSize.constraint(bodySize.width - 20, bodySize.height - 20);                
                var scale = fixSize.width / width;
               
                if(scale < 1){
                    _this.imgScale = scale;    
                    _this.refreshTitle();
                    _this.scale(scale);
                } else {
                    _this.scale(1);
                }
            });
        });
    }.extend(ujs.ui.Dialog);
    
    _ImagePreviewDialog.prototype.refreshTitle = function(){        
        this.setTitle(this.config['title'] + ' (' + parseInt(this.imgScale * 100) + '%)');
    };
    
    _ImagePreviewDialog.prototype.scale = function(scale){
        this.$image.css({
           'width' : this.trueImgWidth * scale,
           'height' : this.trueImgHeight * scale
        });
        this.imgScale = scale;    
        this.refreshTitle();
    };
    
    //--------------------------------------------------------------------------------------------
    
    ujs.define('ImagePreviewDialog', 'ujs.subjects.dialog', function(){
        return _ImagePreviewDialog;
    });
    
})(jQuery);